<template>
  <div>
    <h1 class="title">表单内容</h1>
    <!-- 表单内容 -->
    <div class="table_con">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{ prop: 'id', order: 'descending' }"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ background: 'rgb(152,152,152)', color: '#fff' }"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="id" label="ID" sortable width="180">
        </el-table-column>
        <el-table-column prop="title" label="Title" sortable width="180">
        </el-table-column>
        <el-table-column prop="content" label="Content" sortable width="180">
        </el-table-column>
        <el-table-column prop="status" label="Status" sortable width="180">
        </el-table-column>
      </el-table>
      <el-button class="addBtn" type="primary" @click="dialogVisible = true"
        >Add</el-button
      >
    </div>

    <!-- 是否删除提示框 -->
    <el-card v-if="isShow">
      <span>你是想要删除它吗？</span>
      <span>
        <el-button @click="this.isShow = false">No</el-button>
        <el-button @click="delNote">Yes</el-button>
      </span>
    </el-card>

    <!-- addNote弹框 -->
    <el-dialog
      title="Add note"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="title">
          <el-input v-model="form.title" placeholder="Add title"></el-input>
        </el-form-item>
        <el-form-item prop="content">
          <el-input v-model="form.content" placeholder="Add content"></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <span slot="footer" class="dialog-footer"> -->
          <el-button type="primary" @click="addNote(form)">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <!-- </span> -->
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import eventBus from "../EventBus/index";
export default {
  data() {
    return {
      isShow: false,
      multipleSelection: [],
      form: {
        id: 0,
        title: "",
        content: "",
        status: "New",
      },
      rules: {
        title: [{ required: true, message: "请填写标题", trigger: "blur" }],
        content: [{ required: true, message: "请填写内容", trigger: "blur" }],
        // form:[(required:)]
      },
      dialogVisible: false,
      delDialogVisible: false,
      tableData: [],
    };
  },
  created() {},
  mounted() {
    // 获取数据
    this.getData();
  },
  watch: {
    // 监听传递变化的数据
    tableData: {
      handler(newVal, olaVal) {
        // 传出总条数等信息
        eventBus.$emit("total", this.tableData);
      },
    },
  },
  methods: {
    async getData() {
      await axios.get("http://localhost:8080/getData").then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        console.log(this.tableData, "this.table");
        // 传出总条数等信息
        eventBus.$emit("total", this.tableData);
      });
    },
    // 删除note
    delNote() {
      this.multipleSelection.forEach((value, index) => {
        this.tableData.forEach((val, i) => {
          if (value.id == val.id) {
            this.tableData.splice(i, 1);
          }
        });
      });
    },
    // 获取选中note
    handleSelectionChange(val) {
      console.log(val, "val");
      if (val.length) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
      this.multipleSelection = val;
      //   console.log(this.multipleSelection, "multipleSelection");
    },

    // 添加note
    addNote(form) {
      console.log(form, "gorm");
      // console.log(typeof(e.preventDefault()), 'e')
      // 先对表单进行校验
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
          // 判断 计算id
          var id =
            this.tableData.length === 0
              ? 1
              : this.tableData[this.tableData.length - 1].id + 1;
          this.tableData.push({
            id: id,
            title: form.title,
            content: form.content,
            status: form.status,
          });
          // 成功后重置
          this.$refs.form.resetFields();
        } else {
          console.log("error submit");
          // console.log(e,'e')
          // e.preventDefault();
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped>
.table_con {
  position: relative;
  width: 768px;
}
.table_con .addBtn {
  position: relative;
  left: 100%;
  transform: translateX(-100%);
  margin-top: 20px;
  width: 160px;
  background-color: rgb(0,104,157);
}
.el-card {
  width: 750px;
  /* height: 40px; */
}

.el-card ::v-deep .el-card__body {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
}
</style>